<template>
  <div class="cat-content">
    <div class="cat-header">
      <img src="../../assets/img/cat1.png" alt="" width="250">
    </div>
    <div class="cat-wrap">
      <div class="notice-box" v-for="(item,index) in noticeArr" :key="index">
        <img class="notice-img" :src="item.url" alt="">
      </div>
      <div class="cat-foot">
        <img src="../../assets/img/cat2.png" alt="">
        暂时没有更多啦~
        <img src="../../assets/img/cat2.png" alt="">
      </div>
    </div>
    <div class="btn">
      <CloseCircleOutlined @click="close"/>
      <div class="heart" @click="heart = !heart">
        <HeartOutlined  v-if="!heart"/>
        <HeartTwoTone v-else twoToneColor="#eb2f96" />
      </div>

    </div>
  </div>

</template>

<script setup>
import {ref,reactive} from "vue";
let emit = defineEmits(['close'])
let noticeArr = reactive([
  { url: 'https://img2.baidu.com/it/u=706027820,510331291&fm=253&fmt=auto&app=138&f=PNG' },
  { url: 'https://img1.baidu.com/it/u=4110741065,1666247301&fm=253&fmt=auto&app=138&f=PNG' },
  { url: 'https://img1.baidu.com/it/u=1264210817,378873341&fm=253&fmt=auto&app=138&f=PNG' },
  { url: 'https://img0.baidu.com/it/u=1129840776,3682406517&fm=253&fmt=auto&app=138&f=PNG' },

])
let heart = ref(false)
const close = ()=>{
  emit('close')
}
</script>

<style scoped>
.cat-content{
  width: 100%;
  height: 100%;
  position: relative;
  padding-bottom: 10px;
  box-sizing: border-box;
}
.cat-header{
  width: 100%;
  height: 50px;
  text-align: center;
}

.cat-wrap{
  width: 100%;
  height: calc(100% - 60px);
  overflow: scroll;
  overflow-x: hidden;
}
.notice-box {
  width: 300px;
  height: 150px;
  margin: 5px auto;
  overflow: hidden;
  position: relative;
  border-radius: 10px;

}
/*@media screen and (max-width: 1510px) {*/
/*  .notice-box {*/
/*    width: 250px;*/
/*    height: 125px;*/
/*  }*/
/*}*/

.notice-img{
  width: 100%;
  height: 150px;
  animation: dot 2s;
}
@keyframes dot {
  from{
    opacity:0;
    transform: translateX(-50px) scale(0.5);
  }
  to{
    opacity:1;
    transform: translateX(0px) scale(1);
  }
}

.cat-foot{
  width: 90%;
  height: 50px;
  margin: 20px 5%;
  border: 1px #888888 dashed;
  color: #6c6c6c;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn{
  width: 50px;
  height: 100px;
  position: absolute;
  top: 5px;
  left: -50px;
  display: flex;
  flex-direction: column;
}
.btn span{
  margin: 10px;
  font-size: 24px;
  cursor: pointer;
  color: #5c5c5c;
}
.btn span:hover{
  color: #2296ee;
}
</style>
